<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Keywords" content="摩天轮">
		<meta name="Description" content="摩天轮">
		<meta name="Author" content="哈哈大王">
		<title>十四节摩天轮练习</title>
		<link rel="icon" href="../static/image/akl.ico" type="image/x-icon/">
			<style>
				*{
					margin:0px;
					padding:0px;
					list-style:none;
				}
				
				.bgd{position:relative;
					left:0px;
					top:0;
					right:0;
					bottom:0;
					margin:auto;
					width:900px;
					height:600px;
					background:url(../static/image/bg.png) no-repeat;
					background-size:cover;
				}
				
				.box1{ 
					position:absolute;
					left:310px;
					top:105px;
					width:300px;
					height:300px;
					background:url(../static/image/fsw.png) no-repeat;
					background-size:cover;
					/* border:pink solid 1px; */
				 /* transition:10s linear;  */
				}
				/* .box1:hover{
							 transform:rotate(360deg); 
				
				}
				.box1:hover li{
							 transform:rotate(-360deg); 
				} */
				li{position:absolute;
					width:60px;
					height:60px; /* transition:10s linear;  */
				}
				li:nth-child(1){
				left:123px;
				top:-30px;
				background:url(../static/image/boy.png) no-repeat;
				background-size:100%;
				}
				li:nth-child(2){
				left:243px;
				top:161px;
				background:url(../static/image/girl.png) no-repeat;
				background-size:100%;
				}
				li:nth-child(3){
				left:-2px;
				top:157px;
				background:url(../static/image/shamegirl.png) no-repeat;
				background-size:100%;
				}
				
				@keyframes demo1{
				
				100%{transform:rotate(360deg); }
				}
				@keyframes demo2{
				
				100%{transform:rotate(-360deg); }
				}

				 /* li:hover{
				 	top:5px;
				 	width:10.5%;
				 	height:72%;
				 	border:5px solid rgba(0,0,0,0.3);
				 	transition-duration:1s;
				 } */
				.box1{
				animation:demo1 10s linear infinite;
				/* animation-duration:10s; */
				} 
				li{
				animation:demo2 10s linear infinite;
				}
				.box1:hover li{
				animation-play-state:paused;
				}
				.box1:hover{
				animation-play-state:paused;
				}
			</style>
	</head>
 <body>
 	<div class="bgd">
	<div class="box1">
		 <ul>
			<li class="pict1"></li>
			<li></li>
			<li></li>
			
		</ul> 
	</div>
	</div>
 </body>
</html>
